import React from "react";
import styles from "./index.less";
import { Table, Card, Row, Col, Input, Button, Divider, Switch,message,Space,Modal,InputNumber,Select,Cascader } from "antd";
import Link from "umi/link";

import { loadTask,addTask,deleteTask} from "@/services/taskCenter";
import WrappedTaskAddForm from "@/pages/TaskCenter/add/component/TaskAddForm";
const { Option, OptGroup } = Select;

class App extends React.Component {
  state = {
    data: [],
    pagination: {},
    loading: false,
    // 搜索相关参数
    searchCondition: {},
    visible: false,
    editVisible:false,
    addVisible:false,
    addModalKey:0,
    del_id:0
  };

  constructor(props) {
    super(props);

    // const {query} = props.location;
    // const { history } = props;
    // const pagination = {
    //   current:parseInt(query.page)?parseInt(query.page):1
    // }

    this.setState({
      pageNumber: parseInt(window.location.hash.slice(1), 0) || 1
    })
    this.onKeyChange = this.onKeyChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);
    this.refresh = this.refresh.bind(this);
    this.showModal = this.showModal.bind(this);
    


    this.columns = [
      {
        title: "#",
        key:'#',
        render: (text, record, index) =>{
          return (<span>{index+1}</span>)
        }
      },
      {
        title: "所属项目",
        dataIndex: "project.projectName",
        key:'project.projectName'
      },
      {
        title: "需求名称",
        dataIndex: "title",
        key:'title'
      },
      
      {
        title: "参与人员",
        dataIndex: "member",
        key:'member'
      },
      {
        title: "开始时间",
        dataIndex: "startTime",
        key:'startTime'
      },
      {
        title: "结束时间",
        dataIndex: "endTime",
        key:'endTime'
      },
      // {
      //   title: "状态",
      //   dataIndex: "status",
      //   key:'status'
      // },
      {
        title: "操作",
        key: "actions",
        render: (text, record) => (
          <div>
            <Link onClick={()=>this.showEditModal(record.id)}>编辑</Link>
            <Divider type="vertical" />
            <Link onClick={()=>this.showModal(record.id)}>删除</Link>
          </div>
        )
      }
    ];
  }

  

  componentDidMount() {
    this.fetch().catch(res => {
      console.error(res);
    });
  }

  refresh() {
    this.handleTableChange(this.state.pagination);
  }

  fetch = async (params = {}) => {
    this.setState({ loading: true });
    const response = await loadTask();
    const pagination = { ...this.state.pagination };
    if (response.meta) {
      pagination.total = response.meta.total;
      pagination.pageSize = response.meta.per_page;
    }
    
    this.setState({
      data: response.data,
      loading: false,
      pagination
    });

    
  };

  // 列表翻页
  handleTableChange = pagination => {
    const { pager = pagination, searchCondition = {} } = this.state;
    pager.current = pagination.current;
    this.setState({
      pageNumber: pagination.current,
      pagination: pager
    }),()=>{
      window.location.hash = `#${pagination.current}`;
    }
    this.fetch({
      page: pagination.current,
      ...searchCondition
    });
  };

  // 搜索函数
  handleSearch() {
    const { title, pagination } = this.state;
    // 重置页码
    const pager = { ...pagination };
    pager.current = 1;
    this.setState(
      {
        pagination: pager,
        searchCondition: {
          keyword: title,
        }
      },
      function() {
        // 设置完条件后进行请求
        const { searchCondition } = this.state;
        this.fetch({
          ...searchCondition
        });
      }
    );
  }

  // 查询条件中的姓名改动监听
  onKeyChange(e) {
    this.setState({
      title: e.target.value
    });
  }

  handleChange = (e) => {

    this.setState({
      stageSelected:e
    })
  }

  handleShowChange = (e) => {

    this.setState({
      showSelected:e
    })
  }

  showModal = (id) => {
    this.setState({
      visible: true,
    });

    this.setState({
      del_id: id,
    });
  };

  // 删除
  handleOk = e => {
    this.setState({
      visible: false,
    });
    const id = this.state.del_id

    deleteTask(id).then(res => {
      this.refresh()
      message.success('删除成功');
    });

  };

  handleCancel = e => {
    this.setState({
      visible: false,
      del_id:0
    });
  };

  onBlurSort = (e,id) => {
    const param = {
      id:id,
      sort:this.state.sort
    }
    addTask(param).then(res => {
      this.refresh()
    })
  };
  changeSort = (e,id) =>{
    this.setState({
      sort:e
    })
  }

  // 编辑
  showEditModal = (id) =>{
    this.setState({
      addModalKey: this.state.addModalKey + 1,
      editVisible: true,
      edit_id:id
    });
  }

  handleEditCancel = e => {
    this.setState({
      editVisible: false,
      edit_id:0
    });
  }

  // 添加
  showAddModal = e =>{
    this.setState({
      addModalKey: this.state.addModalKey+1,
      addVisible: true,
    });
  }

  handleAddCancel =e =>{
    this.setState({
      addVisible: false,
      editVisible: false,
    });
  }

  refresh1 = e =>{
    this.handleTableChange(this.state.pagination);
  }
  

  render() {
    const { title , cateList} = this.state;
    const type = window.location.href.split('task/')[1];

    return (
      <Row gutter={[16, 16]}>
        {/* 检索条件部分 */}
        <Col>
          <Card title="筛选查询">
            <Row gutter={16}>
              <Col span={4}>
                <div className={styles.inputGroup}>
                  <span className={styles.label}>标题:</span>
                  <Input
                    defaultValue={title}
                    onPressEnter={this.handleSearch}
                    value={title}
                    onChange={this.onKeyChange}
                    className={styles.input}
                  />
                </div>
              </Col>

              {/*  搜索动作 */}
              <Col span={4}>
                <Button icon="search"  type="primary" onClick={this.handleSearch}>
                  搜索
                </Button>
              </Col>
            </Row>
          </Card>
        </Col>
        {/* 数据展示部分 */}
        <Col>
          <Card
            title="数据列表11"
            extra={<Button icon="plus-circle" type="primary" onClick={this.showAddModal}>添加</Button>}
          >
            <Table
              columns={this.columns}
              rowKey={record => record.id}
              dataSource={this.state.data}
              pagination={this.state.pagination}
              loading={this.state.loading}
              onChange={this.handleTableChange}
            />
          </Card>
          <Modal
            title="温馨提示"
            visible={this.state.visible}
            onOk={this.handleOk}
            onCancel={this.handleCancel}
          >
            <p>数据删除后不可恢复，您确定要删除此条数据吗？</p>
          </Modal>

          <Modal
            title={'编辑任务'}
            visible={this.state.editVisible}
            onCancel={this.handleEditCancel}
            footer={[]}
            width={900}
            key={this.state.addModalKey}
            height={800}
            style={{overtaskY:'auto',overtaskX:'hidden'}}
          >
            {this.state.edit_id ? <WrappedTaskAddForm id={this.state.edit_id} handleAddCancel={this.handleAddCancel} refresh={this.refresh1} /> : null}
          </Modal>

          <Modal
            title={'添加任务'}
            visible={this.state.addVisible}
            onCancel={this.handleAddCancel}
            footer={[]}
            width={900}
            key={this.state.addModalKey}
            height={800}
            style={{overtaskY:'auto',overtaskX:'hidden'}}
          >
            <WrappedTaskAddForm id={0} type={type} handleAddCancel={this.handleAddCancel} refresh={this.refresh1} />
          </Modal>

        </Col>
      </Row>
    );
  }
}

export default () => (
  <div className={styles.container}>
    <div id="components-table-demo-ajax">
      <App />
    </div>
  </div>
);
